<template>
    <!-- 首页-顶部模块 -->
    <div class="HomeTop">
        <div class="leftBox">
            <div class="notice">
                <!-- <i class="el-icon-bell"></i>
                <vue-seamless-scroll class="scrollBox" :data="noticData" :class-option="classOption">
                    <div class="noticeItem" v-for="(item, index) in noticData" :key="index">
                        <div class="noticText">{{ item.noticText }}</div>
                        <div class="noticTime">发起时间：{{ item.noticTime }}</div>
                        <div class="readNum">阅读：{{ item.readNum }}</div>
                    </div>
                </vue-seamless-scroll> -->
                <div class="scrollBox">
                    <div class="noticeItem">
                        <div class="noticText">贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统</div>
                    </div>
                </div>
            </div>
            <div class="userMsg">
                <div class="user">
                    <img src="@/assets/images/layout/default_photo.png" />
                    <div class="msg">
                        <div class="nameTel">
                            <div class="name">{{ userName }}</div>
                            <div class="tel">{{ userPhone }}</div>
                        </div>
                        <div class="position">项目部 · 管理</div>
                    </div>
                </div>
                <div class="greetings">{{ timeText }}，好心情从高效的此刻开始</div>
            </div>
        </div>

        <div class="centerBox">
            <el-carousel trigger="click" arrow="never">
                <el-carousel-item>
                    <div class="carouselBox">
                        <div class="title">项目实时天气</div>
                        <div class="weatherBox">
                            <div class="left">
                                <div class="num">{{ weatherData.temperature }}℃</div>
                                <div class="label">温度</div>
                            </div>
                            <div class="right">
                                <SvgIcon class-name="menuIcon" :icon-name="weatherData.weatherIcon" />
                                <div class="label">{{ weatherData.weather }}</div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
                <!-- <el-carousel-item>
                    <div class="carouselBox">
                        <div class="title">环境监测</div>
                        <div class="weatherBox">
                            <div class="left">
                                <div class="num">57</div>
                                <div class="label">噪音(dp)</div>
                            </div>
                            <div class="right">
                                <div class="num">优</div>
                                <div class="label">空气质量</div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item> -->
            </el-carousel>
        </div>

        <div class="rightBox">
            <div class="warning ry">
                <SvgIcon icon-name="ryWarning" />
                <div class="warningMsg">
                    <div class="type">人员预警(条)</div>
                    <div class="num">{{ warnCount.warnNumEmp.toLocaleString() || 0 }}</div>
                </div>
            </div>
            <!-- <div class="warning sb">
                <SvgIcon icon-name="sbWarning" />
                <div class="warningMsg">
                    <div class="type">设备报警(条)</div>
                    <div class="num">{{ warnCount.warnNumMach.toLocaleString() }}</div>
                </div>
            </div> -->
            <div class="warning sb">
                <SvgIcon icon-name="sbWarning" />
                <div class="warningMsg">
                    <div class="type">安全生产(天)</div>
                    <div class="num">{{ projectInfoObj.safeDays || 0 }}</div>
                </div>
            </div>
            <div class="warning sp">
                <SvgIcon icon-name="spWarning" />
                <div class="warningMsg">
                    <div class="type">视频报警(条)</div>
                    <div class="num">{{ warnCount.warnNumFim.toLocaleString() || 0 }}</div>
                </div>
            </div>
            <!-- <div class="warning hj">
                <SvgIcon icon-name="hjWarning" />
                <div class="warningMsg">
                    <div class="type">环境报警(条)</div>
                    <div class="num">{{ warnCount.warnNumEnv.toLocaleString() }}</div>
                </div>
            </div> -->
            <div class="warning hj">
                <SvgIcon icon-name="hjWarning" />
                <div class="warningMsg">
                    <div class="type">现场设备(台)</div>
                    <div class="num">{{ machTypeCount || 0 }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getWeatherAPI, getWarnCountAPI } from "@/api/home"
import vueSeamlessScroll from 'vue-seamless-scroll'

import {
    getBoardPrjDateLatest,
    getProjectOverview,
} from "@/api/api";

import { getMachInfoData_V1 } from "@/api/mach.js"

export default {
    name: "HomeTop",
    components: {
        vueSeamlessScroll
    },
    data() {
        return {
            deptId: "",

            userName: "",
            userPhone: "",
            timeText: "上午好",
            noticData: [
                {noticText:"贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统",noticTime:"2025-06-15 09:15",readNum:368},
                {noticText:"贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统",noticTime:"2025-06-15 09:15",readNum:368},
                {noticText:"贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统",noticTime:"2025-06-15 09:15",readNum:368},
                {noticText:"贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统",noticTime:"2025-06-15 09:15",readNum:368},
                {noticText:"贵州华电黔西花溪将军山 100MW 水风互补风电项目安全管控平台系统",noticTime:"2025-06-15 09:15",readNum:368},
            ],
            // 天气数据
            weatherData: {
                weather: "",
                temperature: "",
                weatherIcon: "weather_qing"
            },
            // 报警统计
            warnCount: {
                warnNumEmp: 0,
                warnNumFim: 0,
                warnNumEnv: 0,
                warnNumMach: 0,
            },

            deviceNum: 0, // 现场设备/台
            machTypeCount: 0, // 设备总数

            projectInfoObj: '', //项目信息
        }
    },
    computed:{
        currentPorject() {
            return this.$store.state.porjectObject
        },
        classOption() {
            return {
                // step: 0.3, // 数值越大速度滚动越快
                // limitMoveNum: 4, // 开始无缝滚动的数据量
                // hoverStop: true, // 是否开启鼠标悬停stop
                // direction: 1, // 0向下 1向上 2向左 3向右
                // openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 28, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    watch: {
        currentPorject: {
            handler(val, oldVal) {
                if (val.deptId && oldVal && val.deptId != oldVal.deptId) {
                    this.deptId = val.deptId;
                    this.getWeatherData()
                    this.getWarnCountData()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    created(){
        this.deptId = localStorage.getItem("deptId")
        this.userName = localStorage.getItem("username");
        this.userPhone = localStorage.getItem("userphone");

        // this.getBoardPrjDateLatestFn()
        this.getMachInfoData_V1()
        this.getProjectInfoFn()

        this.getNowTime()
        this.getWeatherData()
        this.getWarnCountData()
    },
    methods: {
        getBoardPrjDateLatestFn() {
            getBoardPrjDateLatest({
                deptId: this.deptId
            }).then(res => {
                if (res.code == 200) {
                    let obj = res.data;
                    this.deviceNum =
                        obj.machOnlineNum +
                        obj.fseOnlineNum +
                        obj.dustOnlineNum +
                        obj.fvsOnlineNum;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        getMachInfoData_V1() {
            getMachInfoData_V1({
                deptId: this.deptId,
            }).then((res) => {
                if (res.code == 200) {
                    // for (let i in res.data.machTypeStat) {
                    //     this.machTypeCount += Number(res.data.machTypeStat[i].num)
                    // }
                    this.machTypeCount = res.data.totalNum;
                } else {
                    this.$Message.warning(res.msg)
                }
            }).catch((error) => {
                console.log(error)
            })
        },

        //获取项目概况数据
        getProjectInfoFn() {
            getProjectOverview({
                deptId: this.deptId
            }).then(res => {
                if (res.code == 200) {
                    this.projectInfoObj = res.data;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },

        // 获取当前时间
        getNowTime(){
            let hours = new Date().getHours()
            if(hours>0 && hours<12){
                this.timeText = "上午好"
            }else if(hours>=12 && hours<=18){
                this.timeText = "下午好"
            }else{
                this.timeText = "晚上好"
            }
        },

        // 获取天气信息
        getWeatherData(){
            getWeatherAPI(this.deptId).then(res=>{
                this.weatherData.temperature = Math.round(res.data.temperature)
                this.weatherData.weather = res.data.weather
                this.weatherData.weatherIcon = 'weather_' + res.data.weatherPic
            })
        },

        // 获取报警统计数据
        getWarnCountData(){
            getWarnCountAPI(this.deptId).then(res=>{
                this.warnCount.warnNumEmp = res.data.warnNumEmp
                this.warnCount.warnNumFim = res.data.warnNumFim
                this.warnCount.warnNumEnv = res.data.warnNumEnv
                this.warnCount.warnNumMach = res.data.warnNumMach
            })
        }
    },
}
</script>

<style scoped lang="less">
.HomeTop{
    display: flex;
    justify-content: space-between;
    height: 225px;
    gap: 20px;

    .leftBox{
        width: inherit;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .notice{
            height: 42px;
            padding: 10px 15px;
            box-sizing: border-box;
            background-color: #ecf9ff;
            border: 1px solid #d4ecff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            i{
                font-size: 18px;
            }
            .scrollBox{
                flex: 1;
                height: 20px;
                margin-left: 10px;
                overflow: hidden;
                .noticeItem{
                    height: 20px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 8px;
                    .noticText{
                        flex: 1;
                        font-size: 14px;
                        color: #7a7b7c;
                    }
                    .noticTime{
                        margin-left: 20px;
                        width: 190px;
                        font-size: 14px;
                        color: #abacb2;
                    }
                    .readNum{
                        margin-left: 20px;
                        width: 70px;
                        font-size: 14px;
                        color: #abacb2;
                    }
                }
            }
        }
        .userMsg{
            height: 160px;
            padding: 0 25px;
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .user{
                display: flex;
                align-items: center;
                color: #333333;
                img{
                    margin-right: 20px;
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                }
                .msg{
                    .nameTel{
                        display: flex;
                        align-items: center;
                        .name{
                            margin-right: 20px;
                            font-size: 24px;
                            font-weight: 700;
                            line-height: 1;
                            white-space: nowrap;
                        }
                        .tel{
                            font-size: 16px;
                            line-height: 1;
                        }
                    }
                    .position{
                        margin-top: 20px;
                        font-size: 16px;
                    }
                }
            }
            .greetings{
                font-size: 20px;
                margin-left: 30px;
            }
        }
    }
    .centerBox{
        width: 295px;
        height: 100%;
        background-color: #ffffff;
        border-radius: 5px;
        /deep/.el-carousel{
            width: 100%;
            height: 100%;
            .el-carousel__container{
                width: 100%;
                height: 100%;
            }
            .el-carousel__indicators{
                .el-carousel__indicator{
                    // &:nth-child(2),&:nth-child(3){
                    //     display: none;
                    // }
                    .el-carousel__button{
                        width: 22px;
                        height: 8px;
                        border-radius: 4px;
                        background-color: #d7d7d7;
                    }
                }
                .is-active{
                    .el-carousel__button{
                        background-color: #4074f1;
                    }
                }
            }
        }
        .carouselBox{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .title{
                margin-bottom: 25px;
                font-size: 16px;
                color: #262626;
                text-align: center;
                font-weight: 700;
                line-height: 1;
            }
            .weatherBox{
                width: 100%;
                display: flex;
                align-items: center;
                color: #333333;
                .left{
                    flex: 1;
                    height: 88px;
                    border-right: 1px solid #dcdcdc;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    .num{
                        font-size: 42px;
                        line-height: 1;
                    }
                    .label{
                        font-size: 16px;
                        text-align: center;
                    }
                }
                .right{
                    flex: 1;
                    height: 88px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    .menuIcon{
                        width: 40px;
                        height: 40px;
                    }
                    .num{
                        font-size: 42px;
                        line-height: 1;
                    }
                    .label{
                        font-size: 16px;
                        text-align: center;
                    }
                }
            }
        }
    }
    .rightBox{
        width: 560px;
        min-width: 560px;
        height: 100%;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        justify-content: space-between;

        .warning{
            width: 280px;
            height: 120px;
            padding-left: 30px;
            box-sizing: border-box;
            background-color: #fff6ed;
            border-radius: 5px;
            display: flex;
            align-items: center;
            .svg-icon{
                width: 55px;
                height: 55px;
            }
            .warningMsg{
                margin-left: 40px;
                .type{
                    font-size: 16px;
                    color: #f7a85d;
                    font-weight: 700;
                    line-height: 1;
                }
                .num{
                    margin-top: 8px;
                    font-size: 36px;
                    color: #030e4e;
                    line-height: 1;
                }
            }
        }
        .ry{
            margin-top: -5px;
            background: url(~@/assets/images/home/ry_bg.png) no-repeat;
            background-size: 100% 100%;
            .warningMsg{
                .type{
                    color: #f7a85d;
                }
            }
        }
        .sb{
            padding-left: 60px;
            margin-top: -5px;
            margin-left: -15px;
            background: url(~@/assets/images/home/sb_bg.png) no-repeat;
            background-size: 100% 100%;
            .warningMsg{
                .type{
                    color: #f7a85d;
                }
            }
        }
        .sp{
            background: url(~@/assets/images/home/sp_bg.png) no-repeat;
            background-size: 100% 100%;
            .warningMsg{
                .type{
                    color: #428bea;
                }
            }
        }
        .hj{
            padding-left: 60px;
            margin-left: -15px;
            background: url(~@/assets/images/home/hj_bg.png) no-repeat;
            background-size: 100% 100%;
            .warningMsg{
                .type{
                    color: #34b7a7;
                }
            }
        }
    }
}
</style>
